window.addEventListener('pageshow', function() {
    //顶部导航栏
    var user = document.querySelector('.user a');

    function banner() {
        /* banner部分 */
        var basefont = 50;
        /* banner轮播图 */
        var banner_ul = this.document.querySelector('.banner .focus');
        /* 轮播图里的图 */
        var banner_pic = banner_ul.children;
        /* banner轮播图的小球 */
        var banner_ball = this.document.querySelector('.banner .bannerBall ul');
        /* banner宽 */
        var banner = banner_ul.parentNode;
        var basewidth = banner.offsetWidth;
        /* 轮播图每增加一整图片 ul的长度增加 */
        banner_ul.style.width = (banner_pic.length * basewidth) + 'px';
        //创建小球 animate
        for (var i = 1; i < banner_pic.length - 1; i++) {
            /* 创建小球 */
            var li = this.document.createElement('li');
            /* 添加属性 */
            li.setAttribute('index', i);
            /* 插入小球 */
            banner_ball.appendChild(li)
                /* 默认第一个小球颜色是白色 */
            banner_ball.children[0].classList.add('current');
        }
        // (一) 轮播图动画
        var index = 0;
        var timer = setInterval(() => {
            index++;
            var translateX = -index * basewidth;
            //实现过度动画 transition
            banner_ul.style.transition = 'all 0.3s ease-out';
            banner_ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
        //等着过度完成之后 再去判断  监听过度完成的事件 transitionend
        banner_ul.addEventListener('transitionend', function() {
            // 无缝滚动 原理：如果索引号等于3 说明走到最后一张 此时快速回到第一张，并且将索引号恢复为0
            if (index >= 4) {
                index = 0;
                //此时图片去掉过渡效果，然后移动
                banner_ul.style.transition = 'none';
                var translateX = -index * basewidth;
                banner_ul.style.transform = 'translateX(' + translateX + 'px)';
            } else if (index < 0) {
                index = 2;
                //此时图片去掉过渡效果，然后移动
                banner_ul.style.transition = 'none';
                var translateX = -index * basewidth;
                banner_ul.style.transform = 'translateX(' + translateX + 'px)';
            }
            //小圆点跟随变化
            // 1. 把ol里面li带有current类名的选出来去掉类名remove
            banner_ball.querySelector('.current').classList.remove('current');
            // 2. 让当前索引号的小li加上current add
            banner_ball.children[index].classList.add('current');
        })

        // (二) 手指滑动轮播图
        // 触摸元素 touchstart：获取手指初始坐标
        var startX = 0;
        var moveX = 0;
        var flag = false;
        banner_ul.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX;
            // 手指触摸的时候停止定时器
            clearInterval(timer);
        });
        // 移动手指 touchmove：计算手指滑动的距离，并且移动盒子
        banner_ul.addEventListener('touchmove', function(e) {
            // 移动距离
            moveX = e.targetTouches[0].pageX - startX;
            // 移动盒子：盒子原来的位置 + 手指移动的距离
            var translatex = -index * basewidth + moveX;
            // 手指拖动的时候，不需要动画效果，所以要取消过渡效果
            banner_ul.style.transition = 'none';
            banner_ul.style.transform = 'translateX(' + translatex + 'px)';
            flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
            e.preventDefault(); // 阻止滚动屏幕的行为
        });
        // 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
        banner_ul.addEventListener('touchend', function(e) {
            if (flag) {
                // (1) 如果移动距离大于50像素，我们就播放上一张
                if (Math.abs(moveX) > 100) {
                    // 如果是右滑 就是播放上一张 moveX是正值
                    if (moveX > 0) {
                        index--;
                    } else {
                        // 如果是左滑 就是播放下一张 moveX是负值
                        index++;
                    }
                    var translatex = -index * basewidth;
                    banner_ul.style.transform = 'translateX(' + translatex + 'px)';
                    banner_ul.style.transition = 'all 0.3s ease-out';
                } else {
                    // (2) 如果移动距离小于50像素 我们就弹回
                    var translatex = -index * basewidth;
                    banner_ul.style.transform = 'translateX(' + translatex + 'px)';
                    banner_ul.style.transition = 'all 0.3s ease-out';
                }
            }
            // 手指离开的时候就重新开启定时器
            clearInterval(timer);
            timer = setInterval(() => {
                index++;
                var translateX = -index * basewidth;
                //实现过度动画 transition
                banner_ul.style.transition = 'all 0.3s ease-out';
                banner_ul.style.transform = 'translateX(' + translateX + 'px)';
            }, 2000);
        })


    }
    banner();

    /* 成功案例部分 */
    function success() {
        /* 成功案例里的轮播图 */
        var success_ul = this.document.querySelector('.success_pic_in_box ul');
        /* 轮播图里的图 */
        var success_ul_pic = success_ul.children;
        /* 每张图的长度 */
        var basewidth = success_ul.offsetWidth / 4;
        /* console.log(success_ul.offsetWidth); */
        /* 根据图片的数目改变轮播图ul的长度 */
        success_ul.style.width = (success_ul_pic.length * basewidth) + 'px';
        /* console.log(success_ul.offsetWidth); */
        // (一) 轮播图动画
        var index = 0;
        var timer = setInterval(() => {
            index++;
            var translateX = -index * basewidth;
            //实现过度动画 transition
            success_ul.style.transition = 'all 0.3s ease';
            success_ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
        //等着过度完成之后 再去判断  监听过度完成的事件 transitionend
        success_ul.addEventListener('transitionend', function() {
            // 无缝滚动 原理：如果索引号等于3 说明走到最后一张 此时快速回到第一张，并且将索引号恢复为0
            if (index >= 6) {
                index = 0;
                //此时图片去掉过渡效果，然后移动
                success_ul.style.transition = 'none';
                var translateX = -index * basewidth;
                success_ul.style.transform = 'translateX(' + translateX + 'px)';
            } else if (index < 0) {
                index = 2;
                //此时图片去掉过渡效果，然后移动
                success_ul.style.transition = 'none';
                var translateX = -index * basewidth;
                success_ul.style.transform = 'translateX(' + translateX + 'px)';
            }
        })

        // (二) 手指滑动轮播图
        // 触摸元素 touchstart：获取手指初始坐标
        var startX = 0;
        var moveX = 0;
        var flag = false;
        success_ul.addEventListener('touchstart', function(e) {
            startX = e.targetTouches[0].pageX;
            // 手指触摸的时候停止定时器
            clearInterval(timer);
        });
        // 移动手指 touchmove：计算手指滑动的距离，并且移动盒子
        success_ul.addEventListener('touchmove', function(e) {
            // 移动距离
            moveX = e.targetTouches[0].pageX - startX;
            // 移动盒子：盒子原来的位置 + 手指移动的距离
            var translatex = -index * basewidth + moveX;
            // 手指拖动的时候，不需要动画效果，所以要取消过渡效果
            success_ul.style.transition = 'none';
            success_ul.style.transform = 'translateX(' + translatex + 'px)';
            flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
            e.preventDefault(); // 阻止滚动屏幕的行为
        });
        // 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
        success_ul.addEventListener('touchend', function(e) {
                if (flag) {
                    // (1) 如果移动距离大于50像素，我们就播放上一张
                    if (Math.abs(moveX) > 100) {
                        // 如果是右滑 就是播放上一张 moveX是正值
                        if (moveX > 0) {
                            index--;
                        } else {
                            // 如果是左滑 就是播放下一张 moveX是负值
                            index++;
                        }
                        var translatex = -index * basewidth;
                        success_ul.style.transform = 'translateX(' + translatex + 'px)';
                        success_ul.style.transition = 'all 0.3s ease';
                    } else {
                        // (2) 如果移动距离小于50像素 我们就弹回
                        var translatex = -index * basewidth;
                        success_ul.style.transform = 'translateX(' + translatex + 'px)';
                        success_ul.style.transition = 'all 0.3s ease';
                    }
                }
            })
            // 手指离开的时候就重新开启定时器
        clearInterval(timer);
        timer = setInterval(() => {
            index++;
            var translateX = -index * basewidth;
            //实现过度动画 transition
            success_ul.style.transition = 'all 0.3s ease';
            success_ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);
    }
    success();

    /* 获取、传递登录信息 */
    (function getflag() {
        var flag = window.localStorage.getItem('flag');

        //将信息传给广告宣传栏
        var advertising = document.querySelector('.adv'); //主导航栏的广告宣传
        var advertis = document.querySelector('.adv2'); //左导航栏的广告宣传
        advertising.addEventListener('click', function() {
            location.href = 'advertising.html';
            window.localStorage.setItem('flag', flag);
            //console.log(2);
        })
        advertis.addEventListener('click', function() {
            location.href = 'advertising.html';
            window.localStorage.setItem('flag', flag);
            //console.log(1);
        })

        //将信息传给影视制作
        var videoing = document.querySelector('.video'); //主导航栏的影视制作
        var videos = document.querySelector('.videoP'); //左导航栏的影视制作
        videoing.addEventListener('click', function() {
            location.href = 'video_production.html';
            window.localStorage.setItem('flag', flag);
            //console.log(2);
        })
        videos.addEventListener('click', function() {
            location.href = 'video_production.html';
            window.localStorage.setItem('flag', flag);
            //console.log(1);
        })


        if (flag == 'true') {
            //将信息传给广告宣传栏
            user.href = 'memberCenter.html';
            /* advertising.addEventListener('click', function() {
                location.href = 'advertising.html';
                window.localStorage.setItem('flag', true);
                console.log(2);
            })
            advertis.addEventListener('click', function() {
                location.href = 'advertising.html';
                window.localStorage.setItem('flag', true);
                console.log(1);
            }) */

            //把信息传给 影视宣传 页面
        } else {
            user.href = 'login.html';
            /* advertising.addEventListener('click', function() {
                location.href = 'advertising.html';
                window.localStorage.setItem('flag', false);
            })
            advertis.addEventListener('click', function() {
                location.href = 'advertising.html';
                window.localStorage.setItem('flag', false);
            }) */
        }
    }())
})